<template>
  <div class="marquee" :class="{'marqueeHover':bjFlg}" :style="{'padding':padding}" :title="msg">
    <slot></slot>
    <div v-if="bjFlg" class="triangle"></div>
    <div v-if="bjFlg" class="tick"></div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  props: ["padding", "msg", "bjFlg"],
  methods: {},
  components: {}
};

// {
//   商品id：{商品id，图片，标题，颜色分类，价格，数量}
// }


// 

</script>

<style lang="scss" type="text/css" scoped>
.marquee {
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-block;
  border: 1px solid #cccccc;
  text-align: left;
  cursor: pointer;
  .triangle {
    position: absolute;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 0;
    height: 0;
    border: 8px solid;
    border-color: transparent red red transparent;
  }
  .tick {
    position: absolute;
    width: 4px;
    height: 8px;
    bottom: 0px;
    right: 2px;
    border-color: white;
    border-style: solid;
    border-width: 0px 2px 2px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
.marquee:hover {
  border: 1px red solid;
}
.marqueeHover {
  border: 1px red solid;
}
</style>
